import React, { Component } from 'react';
import Styled from 'styled-components';
import { Button } from 'antd';

const Box = Styled.div`
  display: flex;
  justify-content: center;
  padding-top: 150px;
  height: 100%;
  background-color: #FFFFFF;
  > .left {
    margin-right: 52px;
    font-size: 20px;
    color: #CCCCCC;
    > .one {
      line-height: 160px;
      font-size: 120px;
      font-weight: bold;
    }
    > ul {
      margin: 15px 0 20px 0;
      color: #666666;
    }
    .two {
      margin-right: 16px;
    }
  }
`;

class NotFound extends Component {

  render() {
    const { history } = this.props;
    return (
      <Box>
        <div className="left">
          <div className="one">404</div>
          <div>对不起，当前页面发生错误！</div>
          <ul>
            <li>• 你所查看的页面无法浏览或已经不存在</li>
            <li>• 页面重定义或程序出错</li>
          </ul>
          <div>
            <Button type="primary" ghost icon="sync" className="two" onClick={() => history.push('/')}>刷新</Button>
            <Button type="primary" ghost icon="rollback" onClick={() => history.goBack()}>返回</Button>
          </div>
        </div>
        <div>
          <img src="/res/404.png" alt="404" />
        </div>
      </Box>
    )
  }
}

export default NotFound;